<template>
  <div class="header">
    <search 
    	class="search" 
    	:placeholder="placeholder" 
    	:results='results'
    	auto-scroll-to-top top="0" 
    	position="fixed" 
    	@on-focus="onFocus" 
    	@on-cancel="onCancel" 
    	@on-submit="onSubmit" 
    	@on-change="getResult"
    	ref="search">
      <slot name='left' v-if="show">
        <div class="address" slot="left">
        	<div @click="toOtherPage">
        		{{place}}
        	</div>
        </div>
      </slot>
      <slot name='right' v-if="show">
        <span class="iconfont icon-saoma rights" slot="right"></span>
      </slot>
    </search>
  </div>
</template>

<script>
import { Search } from 'vux'
export default {
  components: {
    Search
  },
  props:{
  	places:{
  		type:String,
  		default:'搜索'
  	}
  },
  data () {
    return {
      place: '福州',
      show: true,
      placeholder:this.places,
      otherValue:['ASD','AFAS'],
      results: []
    }
  },
  methods: {
  	toOtherPage(){
  		this.$router.push('/chooseStores');
  	},
    onFocus () {
      this.show = false
      document.getElementsByClassName(
        'weui-search-bar__cancel-btn'
      )[0].style.color =
        'gray'
    },
    onCancel () {
      this.show = true
    },
    onSubmit () {
      this.$refs.search.setBlur()
      this.$vux.toast.show({})
    },
    changeStyle () {
      var weuiSearchBar = document.getElementsByClassName(
        'weui-search-bar'
      )[0]
      var weuiSearchBarForm = document.getElementsByClassName(
        'weui-search-bar__form'
      )[0]
      var weuiSearchBarLabel = document.getElementsByClassName(
        'weui-search-bar__label'
      )[0]
      weuiSearchBar.style.backgroundColor = '#FFF'
      weuiSearchBarForm.style.height = '93%'
      weuiSearchBarForm.style.borderRadius = '5rem'
      weuiSearchBarLabel.style.background = '#f0f0f0'
    },
    getResult (val) {
//    console.log('on-change', val)
      this.results = val ? getResult(val) : []
    },
  },
  mounted () {
    this.changeStyle()
  }
}

function getResult (val) {
  let rs = []
  for (let i = 0; i < 20; i++) {
    rs.push({
      title: `${val} result: ${i + 1} `,
      other: i
    })
  }
  return rs
}
</script>

<style scoped>
.address,
.rights {
  color: gray;
}
.address {
  margin-right: 10px;
}
.rights {
  margin-left: 10px;
}
.address {
  width: 2.2rem;
}

.iconfont {
  font-size: 1.1rem;
  display: block;
  transform: scale(1.2);
}
</style>